<style scoped>
/* #map, */
#ctrl-bar {
  z-index: 2;
  position: absolute;
  padding: 2px 2px;
  text-align: center;

  top: 10px;
  right: 10px;
  background: #fff;
}
#map {
  z-index: 1;
}

</style>

<template id="route-map">
  <div id="route-map-container" >

    <div id="map" :style="style"/>
    <ButtonGroup id="ctrl-bar">
        <Button type="ghost" icon="play"></Button>
        <Button type="ghost" icon="pause"></Button>
        <Button type="ghost" icon="stop"></Button>
    </ButtonGroup>

  </div>
</template>

<script>
export default {
  name: 'routeMapView',
  data() {
    return {
      style: {
        width: "100%",
        height: "760px"
      }
    };
  },
  props: ["centre","points"],
  methods: {
    getMsg(){
      alert("123");
    }
  },
  mounted() {
    var map = new BMap.Map("map", { enableMapClick: false });
    var center = new BMap.Point(108.953652,34.276184);
    var styleJson = [
      {
        featureType: "all",
        elementType: "geometry",
        stylers: {
          hue: "#007fff",
          saturation: 89
        }
      },{
        featureType: "water",
        elementType: "all",
        stylers: {
          color: "#ffffff"
        }
      }
    ];
    map.centerAndZoom(center, 15);
    map.enableScrollWheelZoom(true);
    map.setMapStyle({ styleJson: styleJson });
    map.clearOverlays();

    var myP1 = new BMap.Point(116.380967, 39.913285); //起点
    var myP2 = new BMap.Point(116.424374, 39.914668); //终点
    var car = new BMap.Icon("../src/assets/car.png", new BMap.Size(32, 70), {
      offset: new BMap.Size(0, -5), //相当于CSS精灵
      imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
    });
    var driving2 = new BMap.DrivingRoute(map, {
      renderOptions: { map: map, autoViewport: true }
    }); //驾车实例
    driving2.search(myP1, myP2); //显示一条公交线路

    window.run = function() {
      var driving = new BMap.DrivingRoute(map); //驾车实例
      driving.search(myP1, myP2);
      driving.setSearchCompleteCallback(function() {
        var pts = driving
          .getResults()
          .getPlan(0)
          .getRoute(0)
          .getPath(); //通过驾车实例，获得一系列点的数组
        var paths = pts.length; //获得有几个点

        var carMk = new BMap.Marker(pts[0], { icon: car });
        map.addOverlay(carMk);
        var i = 0;
        function resetMkPoint(i) {
          carMk.setPosition(pts[i]);
          if (i < paths) {
            setTimeout(function() {
              i++;
              resetMkPoint(i);
            }, 100);
          }
        }

        setTimeout(function() {
          resetMkPoint(5);
        }, 100);

      });
    };

    setTimeout(function() {
      run();
    }, 1500);
  }
};
</script>